<!--  -->
<template>
    <div
        id="cardcontainer"
        class="ordercard-container">
        <div class="card-header">
            <checkorder-status-bar :orderDetial="orderItem"> </checkorder-status-bar>
        </div>
        <van-divider style="margin: 0px" />
        <div
            class="ordercard-content"
            @click="onClick">
            <div class="content-item">
                <div class="content-item-label">
                    {{ '维检负责人' }}
                </div>
                <div class="content-item-text">
                    <van-tag
                        color="#61CFBE">{{
                        orderItemNameString(orderItem)
                    }}</van-tag>
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{ '维检结果' }}</div>
                <div class="content-item-text">
                    <check-result :pointinspectioncontents="orderItem.pointinspectioncount" />
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{ '派单日期' }}</div>
                <div class="content-item-text van-ellipsis">{{ momentDateTime(orderItem.sendordertime) }}</div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{ '维检日期' }}</div>
                <div class="content-item-text van-ellipsis">{{ momentDateTime(orderItem.maintaintimestring) }}</div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{ '维检地点' }}</div>
                <div class="content-item-text van-multi-ellipsis--l2">
                    {{ orderItem.address || '--' }}
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{'备注' }}</div>
                <div class="content-item-text">
                    {{orderItem.remark || '--'}}
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-label">
                    {{ '客户名称' }}
                </div>
                <div class="content-item-text">
                    {{ orderItem.customer_name || "--" }}
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-label">
                    {{ '客户联系人' }}
                </div>
                <div class="content-item-text">
                    {{ orderItem.contactperson || "--" }}
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-label">
                    {{ '手机号' }}
                </div>
                <div class="content-item-text">
                    {{ orderItem.contactway || "--" }}
                </div>
            </div>
        </div>
        <div
            class="ordercard-footer"
            id="cardfooter">
            <div class="hidbtn">
                <van-popover v-model:show="showPopover">
                    <van-cell-group>
                        <van-cell
                            v-for="btn in actions"
                            :key="btn"
                            :value="btn.text"
                            @click="btn.callback"
                        />
                    </van-cell-group>
                    <template #reference>
                        <van-button
                            @click.stop="showPopover = true"
                            v-if="isshowmorebtn"
                            class="morebtn"
                            plain
                            type="primary"
                        >更多</van-button
                        >
                    </template>
                </van-popover>
            </div>
            <div class="listbtn">
                <van-button
                    plain
                    color="#1890ff"
                    class="footer-btn"
                    v-for="(btn, index) in firstbtngroup"
                    :key="index"
                    @click.stop="btn.callback"
                >{{ $st(btn.name) || btn.text }}</van-button
                >
            </div>
        </div>
    </div>
</template>

<script>
import { showSuccess, showError } from '@/util/MessageDeal';
import { selfI18n } from '@/i18n';
import { reactive, toRefs, ref } from 'vue';
import { useRouter } from 'vue-router';
import useMaintenanceOrderConfigSetup from '@/setup/maintaincheckorder/MaintaincheckorderActionSetup';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import CheckorderStatusBar from '@/components/maintenance_control/common/CheckorderStatusBar.vue';
import moment from 'moment';
import { useProductArchiveDevicesSetup } from '@/setup/productarchive/ProductArchiveDevicesSetup.js';
import CheckResult from './CheckResult.vue';
// import Cookies from 'js-cookie';
export default {
    name: '',
    components: {
        CheckorderStatusBar,
        CheckResult
    },
    props: {
        memberInfo: Object,
        orderItem: Object
    },
    setup (props) {
        const $t = selfI18n;
        const { repairstatusformat } = getRepairStatusData();
        const router = useRouter();
        const { getPrdArchDetail } = useProductArchiveDevicesSetup();
        const {
            procRate,
            procRateTxt,
            isShowtransfer,
            // isShowendorder,
            isShowdeal,
            isShowrecord,
            // isShowcancel,
            // isShowsubmit,
            isShowcheck
        } = useMaintenanceOrderConfigSetup(props);
        const onClick = () => {
            router.push({
                name: 'maitenancecheckorderdetail',
                params: { maintainworkorderid: props.orderItem.maintainworkorderid }
            });
        };
        // const onRating = () => {
        //     router.push({
        //         name: 'CustomerRating',
        //         // params: { repairId: props.orderItem.repairid, company: props.orderItem.company }
        //         params: {
        //             repairId: props.orderItem.repairid,
        //             repairPhone: props.orderItem.phone
        //         }
        //     });
        // };
        const copyLink = () => {
            if (props.orderItem.evaluateurl) {
                const cInput = document.createElement('input');
                cInput.value = props.orderItem.evaluateurl;
                document.body.appendChild(cInput);
                cInput.select(); // 选取文本域内容;
                // 执行浏览器复制命令
                // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
                // Input要在正常的编辑状态下原生复制方法才会生效
                document.execCommand('Copy');
                showSuccess($t('wp_Copied_successfully'));
                /// 复制成功后再将构造的标签 移除
                cInput.remove();
            } else {
                showError($t('wp_Copied_failed'));
            }
        };
        const momentDateTime = (date) => moment(date).format('YYYY-MM-DD');

        const orderItemNameString = (orderItem) =>
            orderItem.administratoralias
                ? `${orderItem.administrator}(${orderItem.administratoralias})`
                : orderItem.administrator;
        const state = reactive({
            devicedetail: {},
            showdevice: false,
            defaultbtndata: [
                {
                    text: '转派',
                    name: '',
                    isshow: isShowtransfer,
                    callback: () => {
                        router.push({
                            name: 'checkorderreassignment',
                            params: { maintainworkorderid: props.orderItem.maintainworkorderid },
                            query: {
                                administrator: props.orderItem.administrator,
                                administratoralias: props.orderItem.administratoralias
                                // company: state.repairData.company
                            }
                        });
                    }
                },
                {
                    text: '处理',
                    name: '',
                    isshow: isShowdeal,
                    callback: () => {
                        router.push({
                            name: 'maintaincheckorderrecord',
                            query: { maintainworkorderid: props.orderItem.maintainworkorderid }
                        });
                        // copyLink();
                    }
                },
                {
                    text: '维检记录',
                    name: '',
                    isshow: isShowrecord,
                    callback: () => {
                        router.push({
                            name: 'maintaincheckorderrecord',
                            query: { maintainworkorderid: props.orderItem.maintainworkorderid }
                        });
                    }
                },
                {
                    text: '验收',
                    name: '',
                    isshow: isShowcheck,
                    callback: () => {
                        router.push({
                            name: 'maintaincheckorderrecord',
                            query: { maintainworkorderid: props.orderItem.maintainworkorderid }
                        });
                        // orderReassign();
                    }
                }
            ],
            btndata: [],
            firstbtngroup: [],
            actions: [],
            isshowmorebtn: false
            // arr: []
        });
        const initbrndata = () => {
            const arr = [];
            state.defaultbtndata.forEach((item) => {
                if (item.isshow === true) {
                    arr.push(item);
                }
            });
            state.btndata = arr;
            if (arr.length < 4) {
                state.firstbtngroup = arr;
                state.actions = [];
                state.isshowmorebtn = false;
            } else {
                state.firstbtngroup = [arr[0], arr[1], arr[2]];
                const newarr = arr;
                newarr.splice(0, 3);
                state.actions = newarr;
                state.isshowmorebtn = true;
            }
        };
        const showPopover = ref(false);
        const isshowedit = (val) => {
            if (val === '' || val === undefined) {
                return false;
            } else {
                return true;
            }
        };
        const colsedialog = () => {
            state.showdevice = false;
        };
        const onSelect = (action) => {
            action.callback;
        };
        const refData = toRefs(state);
        return {
            // onRating,
            onClick,
            procRate,
            procRateTxt,
            isShowtransfer,
            isShowdeal,
            isShowrecord,
            isShowcheck,
            copyLink,
            repairstatusformat,
            ...refData,
            momentDateTime,
            orderItemNameString,
            showPopover,
            onSelect,
            getPrdArchDetail,
            isshowedit,
            colsedialog,
            initbrndata,
            ...toRefs(state)
        };
    },
    mounted () {
        this.initbrndata();
    }
};
</script>
<style lang="scss" scoped>
.ordercard-container {
  border-radius: 10px;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  .card-header {
  padding: 0px 15px 0px 15px;
}

.ordercard-content {
  padding: 10px 15px 7px 15px;
  font-size: 13px;
}
.content-item {
  width: 100%;
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
}
.content-item-label {
  text-align: left;
  min-width: 100px;
  width: 20%;
  color: rgba(0, 0, 0, 0.6);
  padding: 0px;
}

.content-item-text {
  flex-grow: 1;
  word-wrap: break-word;
  word-break: break-word;
  display: flex;
  align-items: center;
  /* width: calc(100% - 120px); */
}
.ordercard-footer {
  display: flex;
  justify-content: space-between;
  padding: 0px 15px 15px 15px;
}
.cardpopover {
  z-index: 99;
}
.listbtn {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.footer-btn {
  height: 30px;
  margin-left: 10px;
  border-radius: 5px;
  border: 1px solid #1890ff;
  white-space: nowrap;
}
.hidbtn {
  text-align: left;
}
.morebtn {
  border: none;
  height: 30px;
  width: 20px;
  white-space: nowrap;
}
.infoclass {
  padding: 16px 0px 16px 0px;
  text-align: center;
}
}

</style>
